<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <script src="/kissy/build/seed.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>
    <script src="/kissy/src/log.js"></script>
</head>
<body>

<h1>open in ios safari test swipe event</h1>

<h2>swipe</h2>

<div id="t"
     class='placeholder'
     style="
     width: 200px;
     height: 200px;
     overflow: hidden;
     border: 1px solid red;
     ">
    do not cause native scroll
</div>
<br>

<div id="t2"
     class='placeholder'
     style="
     width: 200px;
     height: 200px;
     overflow: hidden;
     -webkit-user-drag:none;
     -webkit-user-select:none;
     -webkit-tap-highlight-color:rgba(0,0,0,0);
     -webkit-touch-callout:none;
      -webkit-touch-action:none;
     border: 1px solid red;
     ">
    cause native scroll
</div>

<br>
<button id="remove">remove</button>
<div style="height: 900px;"></div>
<script>

    KISSY.use('event,node', function (S, Event) {

        var $ = S.all;

        $('.placeholder').append('<p><a href="http://www.g.cn">google</a></p> ' +
                new Array(2).join('<p> ' + (new Array(2).join('h')) + '  </p>'));

        Event.on('#t', "swiping.test", function (e) {
            //log(e.direction + ' : ' + e.distance);
            if (e.distance && (e.direction === 'left' || e.direction === 'right')) {
                e.preventDefault();
            }
        });

        Event.on('#t2,#t', "swipe.test", {
            fn: function (e) {
                log(e.target.id + ' : ' + e.direction + ' : ' + e.duration + ' : ' + e.distance);
            }
        });


        Event.on(document, 'touchmove touchstart touchend touchcancel', function (e) {
            //log('document ' + e.type);
        });

        $('#remove').on('click', function () {

            Event.detach('#t', '.test');
            Event.detach('#t2', '.test');
        });

    });
</script>